<template>
    <a-layout class="MainLayout">
        <!--头部-->
        <a-layout-header class="MainLayout-head">
            <div class="MainLayout-head-common">
                <div class="MainLayout-head-log">
                    <img src="@img/icon.png"/>
                    <span>{{ i18n('list.biScreen', '大屏管理') }}</span>
                </div>
                <div class="MainLayout-list">
                    <div class="MainLayout-head-list" :class="[item.name == selectedKey? 'MainLayout-list-hover':'']"
                         v-for="(item,index) in menus" :key="index" @click="handMenuClick(item)">
                        <rx-icon-show :icon="item.icon"></rx-icon-show>
                        <span>{{ $i18(item.title, '应用名称') }}</span>
                    </div>
                </div>
                <div>
                    <main-user></main-user>
                </div>
            </div>
        </a-layout-header>
        <!--内容-->
        <a-layout-content :style="{background: '#fff'}">
            <router-view/>
        </a-layout-content>
    </a-layout>
</template>

<script>
import MainUser from "@/layouts/main-user.vue";
import { mapState,mapActions} from 'pinia';
import useMain from "../stores/use-main";
import menus from "@/router/menus.js";
import {I18Parse} from "@lowcode/jpaas-base-lib";

export default {
    name: "MainLayout",
    computed: {
        ...mapState(useMain, ['appId','selectedKey'])
    },
    components: {
        MainUser
    },
    data() {
        return {
            collapsed: false,
            customArr: ['customIcon', 'userCustomIcon'], //自定义图标
            menus,
        }
    },
    methods: {
        ...mapActions(useMain, ['setSelectedKey']),
        i18n(name, text, key) {
            return this.$ti18(name, text, "screenLang", key);
        },
        handMenuClick(item) {
            this.setSelectedKey(item.name);
            let path = this.handMenuPath(item);
            this.$router.push(path);
        },
        handMenuPath(menu) {
            let pathParams = {name: menu.name};
            if (this.appId) {
                pathParams["query"] = {
                    appId: this.appId
                }
            }
            return pathParams;
        },
    }
}
</script>

<style lang="less">
.MainLayout {
    height: 100%;

    .ant-layout-header {
        padding: 0px 20px !important;
    }

    .MainLayout-head {
        height: 64px;
        background-color: #4285f4;
        overflow: hidden;
    }

    .MainLayout-head-common {
        display: flex;
    }

    .MainLayout-head-log {
        width: 360px;
        display: flex;
        align-items: center;

        img {
            width: 30px;
            height: 30px;
        }

        span {
            color: #ffffff;
            margin-left: 10px;
            font-size: 18px;
        }
    }

    .MainLayout-list {
        display: flex;
        flex: 1;
        height: 100%;

        .MainLayout-head-list {
            padding: 0px 19px;
            color: white;
            display: flex;
            align-items: center;
            cursor: pointer;
            height: 63px;
            border-bottom: 3px solid #4285f4;

            i {
                font-size: 20px;
                margin-right: 5px;
            }

            span {
                font-size: 16px;
            }
        }

        .MainLayout-head-list:hover {
            background-color: #3b77db;
            border-bottom: 3px solid #2f5faf;
        }

        .MainLayout-list-hover {
            background-color: #3b77db;
            border-bottom: 3px solid #2f5faf;
        }
    }
}
</style>
